<template>
	<!-- 我的-入驻服务-商户入驻 -->
	<view class="MerchantSettlement">
		<template v-if="arr == null">
			<!-- 商户详情和店铺详情 -->
			<view class="main">
				<!-- 商家详情 -->
				<view class="business">
					<view class="title">
						商家详情
					</view>
					<!-- 商家姓名 -->
					<view class="mian-item">
						<view class="notes">
							商家姓名
						</view>
						<view class="inputBox">
							<view class="flexjcsb">
								<input type="text" placeholder="请输入商家姓名" v-model="MerchantName" @blur="getname">
								<!-- <text :class="regular.name == '√' ? 'regularAnswer' : 'regularWrong'">{{regular.name}}</text> -->
								<uni-icons :type="regular.name"></uni-icons>
							</view>
						</view>
					</view>
					<!-- 电子邮箱 -->
					<view class="mian-item">
						<view class="notes">
							电子邮箱
						</view>
						<view class="inputBox">
							<view class="flexjcsb">
								<input type="text" placeholder="请输入您的邮箱" v-model="mailbox" @blur="getmailbox">
								<!-- <text :class="regular.mailbox == '√' ? 'regularAnswer' : 'regularWrong'">{{regular.mailbox}}</text> -->
								<uni-icons :type="regular.mailbox"></uni-icons>
							</view>
						</view>
					</view>
					<!-- 联系方式 -->
					<view class="mian-item">
						<view class="notes">
							联系方式
						</view>
						<view class="inputBox">
							<view class="flexjcsb">
								<input type="number" placeholder="请输入手机号" maxlength="11" v-model="phone" @blur="getphone">
								<!-- <text :class="regular.phone == '√' ? 'regularAnswer' : 'regularWrong'">{{regular.phone}}</text> -->
								<uni-icons :type="regular.phone"></uni-icons>
							</view>
						</view>
					</view>
					<view class="mian-item">
						<view class="notes">
							验证码
						</view>
						<view class="inputBox flexjcsb">
							<input type="text" placeholder="输入验证码" v-model="code">
							<button class="obtainCode" @click.self="eventObtainCode"
								:disabled="isObtainCode">{{isObtainCode ? '重新获取' + obtainCode + 's' : '获取验证码'}}</button>
						</view>
					</view>
					<!-- 登录密码 -->
					<view class="mian-item">
						<view class="notes">
							登录密码
						</view>
						<view class="inputBox">
							<view class="">
								<input type="text" password placeholder="请输入密码" v-model="loginPwd">
							</view>
						</view>
					</view>
				</view>
				<!-- 店铺详情 -->
				<view class="shop">
					<view class="title">
						店铺详情
					</view>
					<!-- 店铺名称 -->
					<view class="mian-item">
						<view class="notes">
							店铺名称
						</view>
						<view class="inputBox">
							<view class="">
								<input type="text" placeholder="请输入店铺名称" v-model="shopNames">
							</view>
						</view>
					</view>
					<!-- 店长姓名 -->
					<view class="mian-item">
						<view class="notes">
							店长姓名
						</view>
						<view class="inputBox">
							<view class="flexjcsb">
								<input type="text" placeholder="请输入店长姓名" v-model="StoreManagerName" @blur="getStoreManagerName">
								<!-- <text :class="regular.StoreManagerName == '√' ? 'regularAnswer' : 'regularWrong'">{{regular.StoreManagerName}}</text> -->
								<uni-icons :type="regular.StoreManagerName"></uni-icons>
							</view>
						</view>
					</view>
					<!-- 店铺地址 -->
					<view class="mian-item">
						<view class="notes">
							店铺地址
						</view>
						<view class="inputBox">
							<view style="display: flex;justify-content: space-between;align-items: center;">
								<picker mode="region" :value="selects" :range="selects" @change="bindDateChange">
									<view class="" v-if="!activeCity">请选择</view>
									<view class="">
										<text>{{activeCity[0]}}</text>
										<text>{{activeCity[1]}}</text>
										<text>{{activeCity[2]}}</text>
									</view>
								</picker>
								<uni-icons type="bottom" size="30rpx"></uni-icons>
							</view>
						</view>
					</view>
					<!-- 详细细致 -->
					<view class="mian-item">
						<view class="notes">
							详细地址
						</view>
						<view class="inputBox">
							<view class="">
								<input type="text" placeholder="请填写详细地址" v-model="address">
							</view>
						</view>
					</view>
			
					<view class="mian-item">
						<view class="notes">
							选择店铺
						</view>
						<view class="inputBox">
							<view class="inputBox-main">
								<picker mode="selector" :range="shop_category.map(option => option.category_name)"
									:value="category_id" @change="bindShop">
									<view>{{shop_category[category_id].category_name}}</view>
								</picker>
								<uni-icons type="bottom"></uni-icons>
							</view>
						</view>
					</view>
					<view class="mian-item">
						<view class="notes">
							选择套餐
						</view>
						<view class="inputBox">
							<view class="inputBox-main">
								<picker mode="selector" :range="group_list.map(option => option.group_name)"
									:value="group_id" @change="bindGroup">
									<view>{{group_list[group_id].group_name}}</view>
								</picker>
								<uni-icons type="bottom"></uni-icons>
							</view>
						</view>
					</view>
					<!-- LOGO -->
					<view class="Pictures">
						<view class="notes">
							LOGO
						</view>
						<view class="UploadButton">
							<uni-file-picker limit='1' fileMediatype="image" :image-styles="imageStyles" @select="select">
								<view class="picker">
									<view class="">
										<view class="picker-icon">
											<uni-icons type="camera" size="43rpx"></uni-icons>
										</view>
										<view class="picker-font">
											上传图片
										</view>
									</view>
								</view>
							</uni-file-picker>
						</view>
					</view>
					<!-- 固话 -->
					<view class="mian-item">
						<view class="notes">
							固话
						</view>
						<view class="inputBox">
							<view class="">
								<input type="number" placeholder="请输入固话" v-model="FixedLine">
							</view>
						</view>
					</view>
					<!-- 营业执照 -->
					<view class="Pictures">
						<view class="notes">
							营业执照
						</view>
						<view class="UploadButton">
							<!-- v-model="businessLicense" -->
							<uni-file-picker limit='1' fileMediatype="image" :image-styles="imageStyles"
								@select="getbusinessLicense">
								<view class="picker">
									<view class="">
										<view class="picker-icon">
											<uni-icons type="camera" size="43rpx"></uni-icons>
										</view>
										<view class="picker-font">
											上传图片
										</view>
									</view>
								</view>
							</uni-file-picker>
						</view>
					</view>
				</view>
			</view>
			<!-- 入驻协议 -->
			<view class="agreementBox">
				<radio-group v-model="agreeWith" @click="bindAgreeWith">
					<label class="radio">
						<radio :checked="agreeWith" /><text class="agreementBox-radio">同意</text>
					</label>
				</radio-group>
				<text class="agreement" @click="agreement">《入驻协议》</text>
			</view>
			<view class="buttonBox">
				<button @click="ApplyForEntry">申请入驻</button>
			</view>
		</template>
		<template v-else>
			<!-- 商户详情和店铺详情 -->
			<view class="main">
				<!-- 商家详情 -->
				<view class="business">
					<view class="title">
						商家详情
					</view>
					<!-- 商家姓名 -->
					<view class="mian-item">
						<view class="notes">
							商家姓名
						</view>
						<view class="inputBox">
							<view class="">
								{{arr.name || ''}}
							</view>
						</view>
					</view>
					<!-- 电子邮箱 -->
					<view class="mian-item">
						<view class="notes">
							电子邮箱
						</view>
						<view class="inputBox">
							<view class="">
								{{arr.email || ''}}
							</view>
						</view>
					</view>
					<!-- 联系方式 -->
					<view class="mian-item">
						<view class="notes">
							联系方式
						</view>
						<view class="inputBox">
							<view class="">
								{{arr.mobile || ''}}
							</view>
						</view>
					</view>
					<!-- 商铺状态 -->
					<view class="mian-item">
						<view class="notes">
							审核状态
						</view>
						<view class="inputBox">
							<view class="">
								{{arr.apply_state==1?'待审核':arr.apply_state==2?"财务凭据审核中":
								 arr.apply_state==3?"开店通过":arr.apply_state==-1?"审核失败":
								 arr.apply_state==-2?"财务审核拒绝":"其他未知状态" || ''}}
							</view>
						</view>
					</view>
				</view>
				<!-- 店铺详情 -->
				<view class="shop">
					<view class="title">
						店铺详情
					</view>
					<!-- 店铺名称 -->
					<view class="mian-item">
						<view class="notes">
							店铺名称
						</view>
						<view class="inputBox">
							<view class="">
								{{arr.shop_name || ''}}
							</view>
						</view>
					</view>
					<!-- 店长姓名 -->
					<view class="mian-item">
						<view class="notes">
							店长姓名
						</view>
						<view class="inputBox">
							<view class="">
								{{arr.username || ''}}
							</view>
						</view>
					</view>
					<!-- 店铺地址 -->
					<view class="mian-item">
						<view class="notes">
							店铺地址
						</view>
						<view class="inputBox">
							<view class="">
								<!-- {{arr.province_name}} {{arr.city_name}} {{arr.district_name}} -->
								{{arr.company_full_address || ''}}
							</view>
						</view>
					</view>
					<!-- 详细细致 -->
					<view class="mian-item">
						<view class="notes">
							详细地址
						</view>
						<view class="inputBox">
							<view class="">
								{{arr.address || ''}}
							</view>
						</view>
					</view>
			
					<view class="mian-item">
						<view class="notes">
							选择店铺
						</view>
						<view class="inputBox">
							<view class="">
								{{arr.category_name || ''}}
							</view>
						</view>
					</view>
					<view class="mian-item">
						<view class="notes">
							选择套餐
						</view>
						<view class="inputBox">
							<view class="">
								{{arr.group_name || ''}}
							</view>
						</view>
					</view>
					<!-- LOGO -->
					<view class="Pictures" v-if="arr == null">
						<view class="notes">
							LOGO
						</view>
						<view class="UploadButton">
							<uni-file-picker limit='1' fileMediatype="image" :image-styles="imageStyles" @select="select">
								<view class="picker">
									<view class="">
										<view class="picker-icon">
											<uni-icons type="camera" size="43rpx"></uni-icons>
										</view>
										<view class="picker-font">
											上传图片
										</view>
									</view>
								</view>
							</uni-file-picker>
						</view>
					</view>
					<!-- 固话 -->
					<view class="mian-item" v-if="arr.telephone != ''">
						<view class="notes">
							固话
						</view>
						<view class="inputBox">
							<view class="">
								{{arr.telephone || ''}}
							</view>
						</view>
					</view>
					<!-- 营业执照 -->
					<view class="Pictures" v-if="arr == null">
						<view class="notes">
							营业执照
						</view>
						<view class="UploadButton">
							<!-- v-model="businessLicense" -->
							<uni-file-picker limit='1' fileMediatype="image" :image-styles="imageStyles"
								@select="getbusinessLicense">
								<view class="picker">
									<view class="">
										<view class="picker-icon">
											<uni-icons type="camera" size="43rpx"></uni-icons>
										</view>
										<view class="picker-font">
											上传图片
										</view>
									</view>
								</view>
							</uni-file-picker>
						</view>
					</view>
				</view>
			</view>
		</template>
	</view>
</template>

<script>
	import city from '../../../public/city.js'
	const $api = require('@/utils/request.js').API
	export default {
		data() {
			return {
				imageStyles: {
					width: 64,
					height: 64,
					border: {
						width: 2,
						radius: '7rpx'
					}
				},
				MerchantName: '', // 商家姓名
				mailbox: '', // 电子邮箱
				phone: '', // 联系方式
				// 验证码
				obtainCode: 60,
				isObtainCode: false,
				code: '',
				codeKey: '',
				loginPwd: '', // 登录密码
				shopNames: '', // 店铺名称
				StoreManagerName: '', // 店长姓名
				selects: city,

				activeCity: '', // 店铺地址
				// province_name:[],
				// city_name:[],
				// district_name:[],

				address: '', // 详细地址
				LOGO: '', // LOGO
				FixedLine: '', // 固话
				shopPhone: '', // 手机号
				businessLicense: '', // 营业执照

				agreeWith: false, // 同意入驻协议
				arr: [],
				show_shop: false, // 选择店铺
				// buttonText: '申请入驻',
				selectedImages: [], // 保存选择的图片

				shop_category: [],
				category_id: 0, // 选择店铺
				group_list: [],
				group_id: 0, // 选择套餐
				
				regular: {
					name: '',
					mailbox: '',
					phone: '',
					StoreManagerName: '',
				}
			}
		},
		onLoad() {
			this.getAgreement()
			this.merchantInformation()
			this.arr = uni.getStorageSync('MerchantSettlement')
			if (uni.getStorageSync('MerchantSettlement')) {
				this.flag = false
			} else {
				this.flag = true
			}
		},
		onShow() {
		},
		methods: {
			// 申请入驻信息
			merchantInformation(){
				$api.postMerchantInformation({}).then(res => {
					this.arr = res.data.data
				})
			},
			getAgreement() {
				$api.postAgreement({}).then(res => {
					this.shop_category = res.data.data.shop_category
					this.group_list = res.data.data.group_list
				})
			},
			merchantStatus() {
				$api.postMerchantStatus({
					token: uni.getStorageSync('token')
				}).then(res => {
					// 1 待审核，3 通过，-1 审核失败
					if (res.data.data.apply_state === 1) {
						uni.navigateTo({
							url: '../../my/ResidencyServices/InTheProcessOfEntryReview'
						})
					} else if (res.data.data.apply_state === 3) {
						uni.navigateTo({
							url: '../../my/ResidencyServices/SuccessfulEntryReview'
						})
					} else if (res.data.data.apply_state === -1) {
						uni.navigateTo({
							url: '../../my/ResidencyServices/EntryReviewFailed'
						})
					}
				})
			},
			// 申请入驻
			ApplyForEntry() {
				if (this.agreeWith == true) {
					if (!this.MerchantName || !this.mailbox || !this.phone || !this.loginPwd || !this.shopNames || !this.StoreManagerName || !this.activeCity || !this.address || !this.LOGO || !this.FixedLine || !this.businessLicense) {
						uni.showToast({
							title: '输入框里面不能为空',
							icon: 'none',
							duration: 1000
						})
					} else {
						let obj = {
							token: uni.getStorageSync('token'),
							name: this.MerchantName,	// 商家姓名
							email: this.mailbox,	// 邮箱
							mobile: this.phone,	// 联系方式
							username: this.StoreManagerName,	// 店长姓名
							password: this.loginPwd,	// 密码
							shop_name: this.shopNames,	// 店铺名称
							// 店铺地址
							// province: 410000,
							province_name: this.activeCity[0],
							// city: 411500,
							city_name: this.activeCity[1],
							// district: 411502,
							district_name: this.activeCity[2],
							address: this.address,	// 详细地址
							logo: this.LOGO,	// LOGO
							telephone: this.FixedLine, // 固话
							business_license: this.businessLicense,	// 营业执照
							category_id: this.shop_category[this.category_id].category_id,	// 店铺分类id
							category_name: this.shop_category[this.category_id].category_name,	// 店铺分类名称
							group_name: this.group_list[this.group_id].group_name,	// 开始套餐名称
							group_id: this.group_list[this.group_id].group_id,	// 开店套餐id
							key: this.codeKey,
							code: this.code,	// 验证码
						}
						$api.postMerchantApplicationForEntry(obj).then(data => {
							this.merchantStatus()
						})
					}
				} else if (this.agreeWith == false) {
					uni.showToast({
						title: '请勾选入驻协议',
						icon: 'none',
						duration: 1000
					})
				}

				// uni.navigateTo({
				// 	// 成功
				// 	// url:'../../my/ResidencyServices/SuccessfulEntryReview'
				// 	// 失败
				// 	// url:'../../my/ResidencyServices/EntryReviewFailed'
				// 	// 审核中
				// 	url:'../../my/ResidencyServices/InTheProcessOfEntryReview'
				// })
			},
			// 获取验证码
			eventObtainCode() {
				let reg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
				if (reg.exec(this.phone)) {
					if (this.agreeWith == true) {
						this.packSetInterval()
						this.merchantCode()
					} else {
						uni.showToast({
							title: '请勾选用户协议',
							icon: 'none',
							duration: 2000
						})
					}
				} else {
					uni.showToast({
						title: '请输入正确格式的手机号',
						icon: 'none',
						duration: 2000
					})
				}
			},
			merchantCode() {
				$api.postMerchantCode({
					// token: uni.getStorageSync('token'),
					mobile: this.phone,
				}).then(res => {
					this.codeKey = res.data.data.key
				})
			},
			packSetInterval() {
				this.isObtainCode = true
				let countdown = setInterval(() => {
					this.obtainCode--;
					// this.obtainCode = `重新获取${this.obtainCode}S`
					if (this.obtainCode <= 0) {
						clearInterval(countdown)
						this.obtainCode = 60
						this.isObtainCode = false
					}
				}, 1000)
			},
			// logo
			select(res) {
				// this.LOGO = res.tempFilePaths[0]
				uni.uploadFile({
					url: 'https://songcan.xyct1688.com/api/upload/commonimg',
					filePath: res.tempFilePaths[0],
					name: 'file',
					formData: {
						'user': 'test'
					},
					success: (uploadFileRes) => {
						this.LOGO = JSON.parse(uploadFileRes.data).data.pic_path
					},
					fail: e => {

					},
				});
			},
			// 营业执照
			getbusinessLicense(res) {
				// this.businessLicense = res.tempFilePaths[0]
				uni.uploadFile({
					url: 'https://songcan.xyct1688.com/api/upload/commonimg',
					filePath: res.tempFilePaths[0],
					name: 'file',
					formData: {
						"user": "test",
					},
					success: (uploadFileRes) => {
						this.businessLicense = JSON.parse(uploadFileRes.data).data.pic_path
					}
				})
			},
			// 同意协议
			bindAgreeWith() {
				this.agreeWith = !this.agreeWith
			},
			// 入驻协议
			agreement() {
				uni.navigateTo({
					url:'./agreement'
				})
			},
			// 店铺地址
			bindDateChange(e) {
				this.activeCity = e.detail.value
			},
			// 选择店铺
			bindShop(e) {
				this.category_id = e.detail.value
			},
			// 选择套餐
			bindGroup(e) {
				this.group_id = e.detail.value
			},
			// 正则验证
			getname(){
				let reg = /^[\u4e00-\u9fa5]{2,8}$/
				if (reg.exec(this.MerchantName)) {
				  this.regular.name = 'checkmarkempty';
				} else {
				  this.regular.name = 'closeempty';
				}
			},
			getmailbox(){
				let reg = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/
				if (reg.exec(this.mailbox)) {
				  this.regular.mailbox = 'checkmarkempty';
				} else {
				  this.regular.mailbox = 'closeempty';
				}
			},
			getphone(){
				let reg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
				if (reg.exec(this.phone)) {
				  this.regular.phone = 'checkmarkempty';
				} else {
				  this.regular.phone = 'closeempty';
				}
			},
			getStoreManagerName(){
				let reg = /^[\u4e00-\u9fa5]{2,8}$/
				if (reg.exec(this.StoreManagerName)) {
				  this.regular.StoreManagerName = 'checkmarkempty';
				} else {
				  this.regular.StoreManagerName = 'closeempty';
				}
			},
		}
	}
</script>

<style lang="less" scoped>
	.MerchantSettlement {
		font-family: PingFang SC;
		font-weight: 300;
		font-size: 28rpx;
		background: #F3F3F3;
		.regularAnswer {
			color: #19be6b;
		}
		.regularWrong {
			color: #fa3534;
		}
		.main {
			background: white;

			.title {
				text-align: center;
				font-size: 30rpx;
				color: #333333;
			}

			// 商家
			.business {
				.title {
					padding-top: 24rpx;
				}
			}

			// 店铺
			.shop {
				.title {
					padding-top: 32rpx;
				}
			}

			// 每一条数据
			.mian-item {
				display: flex;
				align-items: center;
				height: 89rpx;
				margin: 0 28rpx 0 26rpx;
				// padding: 30rpx 0;
				border-bottom: 1px solid #F3F3F3;
				// font-family: PingFang SC;
				// font-weight: 300;
				// color: #666666;

				// 前面的格式
				.notes {
					width: 190rpx;
				}

				// 后面的input框
				.inputBox {
					position: relative;
					// display: flex;
					// justify-content: space-between;
					// align-items: center;
					width: 100%;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 400;
					// color: #999999;
					line-height: 30rpx;

					uni-icons {
						text-align: right;
					}
					button::after{
						border: none;
					}
					.inputBox-main {
						display: flex;
						justify-content: space-between;
						align-items: center;
					}

					.obtainCode {
						position: absolute;
						top: 10rpx;
						right: 0;
						// display: flex;
						// justify-content: center;
						// align-items: center;
						// height: 50rpx;
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #F14500;
						background: #FFFFFF;
						line-height: 30rpx;
					}
				}
			}

			// 上传图片
			.Pictures {
				margin: 0 28rpx 0 26rpx;

				.notes {
					padding: 34rpx 0 33rpx 0;
				}

				.UploadButton {
					width: 132rpx;
					height: 132rpx;

					.uni-file-picker {
						.picker {
							display: flex;
							justify-content: center;
							text-align: center;
							font-size: 20rpx;
							// font-family: PingFang SC;
							// font-weight: 300;
							color: #A5A5A5;
						}
					}
				}
			}
		}

		.agreementBox {
			display: flex;
			margin: 29rpx 0 67rpx 22rpx;
			font-size: 30rpx;
			// font-family: PingFang SC;
			font-weight: 400;
			color: #5D5D5D;

			.agreementBox-radio {
				padding-left: 18rpx;
			}

			.agreement {
				color: #F14500;
				padding-left: 5rpx;
			}
		}

		// 入驻按钮
		.buttonBox {
			// position: absolute;
			width: 630rpx;
			height: 88rpx;
			// left: 60rpx;
			// bottom: 0;
			margin: auto;

			// margin-bottom: 21rpx;
			button {
				font-size: 30rpx;
				// font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				background: #F14500;
				border-radius: 44rpx;
			}
		}

		// 修改信息
		.modify {
			margin-top: 114rpx;
		}
	}
</style>